<template>
  <div class="card-container">
    <Row :gutter="40">
      <Col :span="18">
        <Form
          :model="queryReportParams"
          ref="queryReportForm"
          :inline="true"
          :labelCol="{ span: 6 }"
          :wrapperCol="{ span: 20 }"
        >
          <Row :gutter="20">
            <Col :span="8">
              <FormItem label="事件ID" name="eewId">
                <Input
                  v-model:value="queryReportParams.eewId"
                  placeholder="请输入事件ID"
                  allowClear
                  @keyup.enter.native="handleReportQuery"
                />
              </FormItem>
            </Col>
            <Col :span="8">
              <FormItem label="时间" name="reportSearchTime">
                <RangePickerCom
                  v-model:timeValue="queryReportParams.reportSearchTime"
                  @updateDate="handleDateUpdate"
                ></RangePickerCom>
                <!-- @keyup.enter.native="handleQuery" -->
              </FormItem>
            </Col>
            <Col :span="8">
              <FormItem label="消息类型" name="msgType">
                <Select
                  v-model:value="queryReportParams.msgType"
                  :options="reportTypeOptions"
                  allowClear
                  placeholder="请选择消息类型"
                ></Select>
              </FormItem>
            </Col>
          </Row>
        </Form>
      </Col>
      <Col :span="6">
        <Flex justify="end">
          <Space>
            <b-button icon="refresh" size="small" @click="resetReportQuery">
              重置</b-button
            >
            <b-button
              icon="search"
              size="small"
              @click="handleReportQuery(true)"
              >平台记录
            </b-button>
            <b-button icon="search" size="small" @click="handleReportTogether"
              >设备记录
            </b-button>
          </Space>
        </Flex>
      </Col>
    </Row>
  </div>
  <div
    class="card-container max-h-full overflow-y-auto"
    v-if="reportTabData.length > 0"
  >
    <div
      v-for="(val, index) in reportTabData"
      :key="'report' + val.eewId + index"
      class="report-container"
    >
      <div class="collapse-top">
        <div class="left flex">
          <span class="font-bold">事件ID:</span>
          <span class="font-bold">{{ val.eewId }}</span>
          <SvgIcon
            :name="val.isResponse == '已响应' ? 'responded' : 'unresponse'"
            class="w-[112px] h-[30px] mr-1"
            :color="val.isResponse == '已响应' ? '#6AD7CA' : '#FF5368'"
            :strokeColor="val.isResponse == '已响应' ? '#6AD7CA' : '#FF5368'"
          />
        </div>
        <div class="right">
          <span @click="handleMessage(val)">消息</span>
          <span @click="handleReceive(val)">回复</span>
          <span @click="handleRespon(val)">响应</span>
        </div>
      </div>
      <div class="report-content">
        <div class="report-left">{{ formatReportType(val.msgType) }}</div>
        <div class="report-right">
          <div>
            <div>
              <span>消息来源：</span>
              <span>{{ val.msgSource }}</span>
            </div>
            <div>
              <span>消息ID：</span>
              <span>{{ val.msgId }}</span>
            </div>
            <div>
              <span>消息生产者：</span>
              <span>{{ val.producer }}</span>
            </div>
          </div>
          <div>
            <div>
              <span>震级：</span>
              <span>{{ val.magnitude }}</span>
            </div>
            <div>
              <span>震源深度：</span>
              <span>{{ val.focdepth }}</span>
            </div>
            <div>
              <span>发震时间：</span>
              <span>{{ val.oritimeStr }}</span>
            </div>
            <div>
              <span>震中地名：</span>
              <span>{{ val.locname }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 分页 -->
  <Pagination
    v-if="reportTotal > 0"
    :total="reportTotal"
    v-model:current="queryReportParams.pageNum"
    v-model:pageSize="queryReportParams.pageSize"
    :changeApi="getReportList"
  ></Pagination>
  <!-- 查看报文弹窗 -->
  <ReportModal
    v-if="reportVisible"
    v-model:report-visible="reportVisible"
    :titles="titles"
    :message-data="messageData"
  ></ReportModal>
</template>

<script setup lang="tsx">
import { ref, watch } from 'vue';
import {
  Col,
  Flex,
  Form,
  FormItem,
  Input,
  Row,
  Select,
  Space,
} from 'ant-design-vue';
import Pagination from '@/components/Pagination/Index.vue';
import SvgIcon from '@/components/SvgIcons/Index.vue';
import { listToOption } from '@/utils/utils';
import { getDeviceQuickReportList, getQuickReportMessage } from '@/api/device';
import { fetchDictsOfType } from '@/api/dict';
import RangePickerCom from './RangePickerCom.vue';
import ReportModal from './ReportModal.vue';

// 时间框点击清除按钮
const handleDateUpdate = (newDate: any) => {
  queryReportParams.value.reportSearchTime = newDate;
  queryReportParams.value.startTime = newDate;
  queryReportParams.value.endTime = newDate;
};

interface Props {
  pageData: any;
}
const props = defineProps<Props>();

const formatReportType = (val: string) => {
  switch (val) {
    case '0401':
      return '自动速报';
    case '0402':
      return '正式速报';
    case '0303':
      return '测试速报';
    default:
      break;
  }
};

const reportTypeOptions = ref<Global.Option[]>([]);
fetchDictsOfType(['sys_report_type']).then((res: any) => {
  const { sys_report_type } = res.data;
  reportTypeOptions.value = listToOption(
    sys_report_type,
    'dictLabel',
    'dictValue',
  );
});

const queryReportParams = ref({
  code: '',
  pageNum: 1,
  pageSize: 10,
  eewId: null,
  reportSearchTime: null,
  startTime: null,
  endTime: null,
  msgType: null,
  msgIds: null,
});

const signalOptions = ref(
  [
    '台风',
    '暴雨',
    '暴雪',
    '寒潮',
    '大风',
    '沙尘暴',
    '高温',
    '干旱',
    '雷电',
    '冰雹',
    '霜冻',
    '大雾',
    '霾',
    '道路结冰',
  ].map((item) => {
    return {
      label: item,
      value: item,
    };
  }),
);

// 速报条件查询
const handleReportQuery = (item: any) => {
  if (item) {
    queryReportParams.value.msgIds = null;
  }
  queryReportParams.value.pageNum = 1;
  if (queryReportParams.value.reportSearchTime) {
    queryReportParams.value.startTime =
      queryReportParams.value.reportSearchTime[0];
    queryReportParams.value.endTime =
      queryReportParams.value.reportSearchTime[1];
  } else {
    queryReportParams.value.startTime = null;
    queryReportParams.value.endTime = null;
  }
  getReportList();
};

// 获取速报列表
const reportLaod = ref(false);
const reportTabData = ref([]);
const reportTotal = ref(0);
const getReportList = async () => {
  reportLaod.value = true;
  queryReportParams.value.code = props.pageData.code;

  queryReportParams.value = Object.fromEntries(
    Object.entries(queryReportParams.value).filter(([_, v]) => v !== null),
  );
  const res: any = await getQuickReportMessage(queryReportParams.value);
  if (res.code == 200) {
    reportLaod.value = false;
    reportTabData.value = res.rows;
    reportTotal.value = res.total;
  }
};
getReportList();

// 速报条件查询重置
const queryReportForm = ref();
const resetReportQuery = () => {
  queryReportForm.value.resetFields();
  handleReportQuery(true);
};

// 同步设备速报查询
const handleReportTogether = async () => {
  // this.queryWarnParams.code = this.pageData.code;
  const res = await getDeviceQuickReportList({
    code: props.pageData.code,
  });
  if (res.code == 200) {
    if (res.msg == '') {
      reportTabData.value = [];
      reportTotal.value = 0;
      return;
    }
    queryReportParams.value.msgIds = res.msg as any;
    handleReportQuery(false);
  }
};

// 速报响应
const messageData = ref({});
const titles = ref('');
const reportVisible = ref(false);
const handleRespon = (record: any) => {
  let dataMaps = JSON.parse(record.statisticsMessage);
  for (let key in dataMaps) {
    if (dataMaps['设备型号'] == 'BOEY-ZD10') {
      dataMaps['设备型号'] = 'BOEY-A2';
    } else if (dataMaps['设备型号'] == 'BOEY-ZD05') {
      dataMaps['设备型号'] = 'BOEY-A1';
    } else if (dataMaps['设备型号'] == 'BOEY-ZD02') {
      dataMaps['设备型号'] = 'BOEY-G2';
    }
  }
  titles.value = '报文';
  messageData.value = dataMaps;
  reportVisible.value = true;
};
// 速报消息
const handleMessage = (record: any) => {
  titles.value = '报文';
  messageData.value = JSON.parse(record.receiveMessage);
  reportVisible.value = true;
};
// 速报回复
const handleReceive = (record: any) => {
  titles.value = '报文';
  messageData.value = JSON.parse(record.replyMessage);
  reportVisible.value = true;
};
</script>

<style lang="scss" scoped>
.report-container {
  padding: 10px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.24);
}

.report-container {
  padding: 10px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.24);
}

.report-content {
  display: flex;
  height: 44px;
  margin: 10px 0;
  color: var(--custom-sever-info);

  .report-left {
    margin-right: 15px;
    padding: 0 4px;
    width: 44px;
    height: 44px;
    text-align: center;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid var(--custom-sever-info);
  }

  .report-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    > div {
      display: flex;

      > div {
        margin: 0 10px;
      }
    }
  }
}

.collapse-content {
  padding: 10px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.24);
  color: rgba(255, 255, 255, 0.6);
}

.collapse-content:last-child {
  border-bottom: none;
}

.collapse-top {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .left {
    // display: flex;
    // align-items: center;
    color: var(--text-color);
    font-size: 18px;
    font-weight: 600;

    > span:nth-child(2) {
      margin-right: 20px;
    }
  }

  .right {
    color: var(--custom-sever-info);
    cursor: pointer;

    > span {
      margin: 0 10px;
    }

    > span:hover {
      color: rgba(106, 215, 202, 1);
    }
  }
}

.collapse-bottom {
  margin-top: 10px;
  display: flex;
  align-items: center;

  > div {
    margin: 0 10px;
  }

  > div:first-child {
    font-size: 16px;
    margin-left: 0;
  }
}
</style>
